import React, { Component } from "react";
import './DouyinList.css';
import axios from 'axios';

export default class DouyinList extends Component {

    //状态
    state = {
        videos: []
    }

    render() {
        return (
            <div className="container">
                <h2 className="page-header">视频列表</h2>
                <div className="row">
                    {
                        this.state.videos.map(item => {
                            return <div className="col-xs-3" key={item.id}>
                                <div  className="img">
                                    <img width="100%" src={item.cover} alt="" />
                                </div>
                                <p>{item.desc}</p>
                            </div>
                        })
                    }
                    
                </div>
            </div>
        );
    }

    //组件挂载完毕的生命周期函数
    async componentDidMount(){
        let result = await axios.get('http://api.xiaohigh.com/douyin?_limit=24');
        this.setState({
            videos: result.data
        })
    }
}
